<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h4>计数器 2</h4>
        <counter :count="3" @inc="handleIncrease"></counter>
        <counter :count="2" @inc="handleIncrease"></counter>
        <div>{{total}}</div>

        <child content="hello aiden">
        <child2 content="hello zellop"></child2>


        </div>
    </div>

    <script>

        var counter = {
            name: "counter",
            props: ['count'],
            template: '<div @click="handleClick">{{number}}</div>',
            data: function () {
                return {
                    number: this.count
                }
            },
            methods: {
                handleClick: function () {
                    this.number = this.number + 2;
                    this.$emit('inc', 2)
                    // debugger
                }
            }
        }

        var child = {
            name: "child",
            props: {
                // content:String //Number
                content: [String ,Number],
                content:{
                    type:[String ,Number],
                    required:true
                } ,

            },
            template: '<div>{{content}}</div>',
           
           
        }

        Vue.component('child2',{
         
            props:['content'],
            template:'<div>{{content}}</div>'
        })

        var app = new Vue({
            el: '#app',
            // components:{
            //     counter:counter
            // },
            components: { [counter.name]: counter, [child.name]: child},
            data: {
                total: 5,
            },
            // // //计算属性
            // computed: {
            //     fullName: function () {
            //         return this.firstName + " * " + this.lastName
            //     }
            // },
            methods: {
                handleIncrease: function (step) {
                    this.total += step
                },

                handleClick: function () {
                    console.log(this.$refs.hello.innerHTML);
                },

                counterChange: function () {
                    console.log(this.$refs.one.number);
                    this.total = this.$refs.one.number + this.$refs.two.number
                    console.log(this.total);

                },

            }
        })
    </script>
</body>

</html>